<template>
	<view class="container patient-list-container">

		<view class="page-main">
			<view style="padding: 20rpx 0">
				<searchVue placeholder="搜索用户姓名、诊号、手机号" @clickSearch="searchFn" />
			</view>

			<view class="page-list" v-for="item in pageList" :key="item.id" @click="jump('/pagesWorker/patient/detail?id='+item.id)">
				<image class="list-img" :src="item.headPortrait" mode="widthFix" @error="$handleImageError(item,'headPortrait')"></image>
				<view>

					<view class="list-name">{{item.name || '-'}}</view>
					<view class="list-item">
						<text class="list-title">性别:</text>
						<text class="list-info c-primary" v-if="item.gender==='男'">男</text>
						<text class="list-info c-danger" v-else>女</text>
						<text class="list-info" style="margin-left: 30rpx;">{{item.age}}</text>
					</view>

					<view class="list-item">
						<text class="list-title">就诊号:</text>
						<text class="list-info">{{item.consultationNumber}}</text>
					</view>
				</view>
			</view>
			<view class="not-more" v-if="isLoading">加载中...</view>
			<view class="null-page" v-else-if="pageList.length<=0 ">
				<text class="iconfont">&#xe642;</text>
				<view class="null-page-tips">暂无数据~</view>
			</view>
			<view class="not-more" v-else-if="notMore">没有更多了...</view>
		</view>


	</view>
</template>


<script lang="ts" setup>
	import searchVue from "@/components/search.vue"
	import { onMounted, ref } from 'vue';
	import { getStorage, hideLoading, showLoading } from '../../common/util';
	import { onPullDownRefresh, onReachBottom } from "@dcloudio/uni-app"
	import userApi from "../../common/userApi";
	const isLoading = ref(false)
	const notMore = ref(true)
	const pageSize = 10
	let pageNum = 1
	const pageList = ref([])
	onMounted(async () => {
		await getPageList()
	})

	const loadMore = () => {
		if (isLoading.value) return
		if (notMore.value) return
		pageNum = pageNum + 1
		getPageList()
	}
	const refreshList = () => {
		notMore.value = false
		pageNum = 1
		pageList.value = []
		getPageList()
	}
	onReachBottom(() => {
		loadMore()
	})
	onPullDownRefresh(() => {
		refreshList()
		uni.stopPullDownRefresh()
	})
	const getPageList = async () => {
		showLoading()
		isLoading.value = true
		try {
			const params = { pageNum, pageSize, keyword,pcUserId:getStorage('userAuth').pcUserId, }
			const res = await userApi.getPatients(params)
			const rows = res.data?.rows || []
			if (rows.length < pageSize) notMore.value = true
			pageList.value = pageList.value.concat(rows)
		} finally {
			isLoading.value = false
			hideLoading()
		}
	}
	let keyword = ''
	const searchFn = (searchKeyword : string) => {
		keyword = searchKeyword
		refreshList()
	}
	const jump = (url : string) => {
		uni.navigateTo({ url: url })
	}
</script>


<style lang="scss">
	.patient-list-container {
		background: linear-gradient(180deg, #DAFBFB 0%, #D7E5FF 8%, #F2F3F8 40%, #F2F3F8 100%);
		padding-bottom: 120rpx;

		.page-main {
			padding: 0 30rpx;
		}

		.page-list {
			margin-bottom: 20rpx;
			background-color: #fff;
			padding: 20rpx;
			border-radius: 10rpx;
			display: flex;
			align-items: center;
		}

		.list-img {
			width: 150rpx;
			height: 150rpx;
			margin-right: 15rpx;
			flex-shrink: 0;
		}

		.list-name {
			font-weight: bold;
			font-size: 28rpx;
			color: #202020;
		}

		.list-item {
			font-size: 28rpx;
			margin-top: 20rpx;
		}

		.list-title {
			color: #6D6D6D;
			margin-right: 15rpx;
		}

		.list-info {
			color: #222222;
		}

	}
</style>